<template>
  <el-drawer
    title="批量修改广告名称"
    :visible="showBatchUpdateAdName"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :wrapperClosable="false"
    :modal="false"
    @close="closeBatchUpdateAdNames"
    size="50%"
  >
    <div>
      <div class="drawer__content">
        <el-table
          :data="adUpdateNames"
          v-loading="showBatchUpdateAdBudgetLoading"
        >
          <el-table-column label="推广系列名称" prop="campaignName" width="300"/>
          <el-table-column label="所选时间段消耗" width="150">
            <template slot-scope="{row}">
              ${{ row.spend }}
            </template>
          </el-table-column>
          <el-table-column label="新的推广系列名称" prop="newBudget">
            <template slot-scope="{row}" v-if="row.editable">
              <div>
                <el-input type="text" v-model="row.newCampName" style="width:100%">
                </el-input>
              </div>
            </template>
            <template v-else>
              不可修改
            </template>
          </el-table-column>
        </el-table>
        <div class="drawer__footer">
          <el-button type="primary" @click="submitBatchUpdateAdNames" style="margin:10px">提交修改</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script>
  import _ from "lodash";
  import {getAdgroupCost} from "@/api/campaign-management/campaign-management";

  export default {
    name: "BatchUpdateAdName",
    components: {

    },
    props : {
      visibleAd : Boolean,
      ads: Array,
      offerId: String,
      startTime: String,
      endTime: String
    },
    async created(){
      let innerAds = _.cloneDeep(this.ads)
      innerAds.forEach(item => {
        item.editable = !(item.ttAdId === "" || item.ttAdId === undefined || item.ttAdId === null || item.status === 6);
        item.spend = 0
      })
      const {data:res} = await getAdgroupCost(this.buildAdGroupEventDTO(innerAds))
      if (res.data.data.length > 0){
        res.data.data.forEach(itm => {
          if (itm.ttAdId !== "") {
            if (itm.ttAdId in res.data.data) {
              itm.spend = res.data.data[itm.ttAdId]
            } else {
              itm.spend = 0
            }
          }
        })
      }
    },
    computed:{
      showBatchUpdateAdName: {
        get() {
          return this.visibleAd
        },
        set(val) {
          this.$emit('update:visibleAd', val || false)
        }
      },
      innerStartTime: {
        get() {
          return this.startTime
        }
      },
      innerEndTime : {
        get() {
          return this.endTime
        }
      }
    },
    data(){
      return {
        adUpdateNames: [],
        showBatchUpdateAdBudgetLoading : false,
      }
    },
    methods: {
      closeBatchUpdateAdNames(){

      },
      submitBatchUpdateAdNames(){

      },
      buildAdGroupEventDTO(arrs){
        let advs = []
        let ttIds = []
        arrs.forEach(item => {
          if (item.ttAdId !== '') {
            ttIds.push(item.ttAdId)
            if (!advs.includes(item.platformId)) {
              advs.push(item.platformId)
            }
          }
        })
        return {
          "advertiserId": advs,
          "metricsList": ["spend"],
          "filterIds": ttIds.join(","),
          "level": "ad_id",
          "startDate": this.innerStartTime,
          "endDate": this.innerEndTime,
        }
      },
    }
  }
</script>
